import React from 'react'
function LogoutButton (props) {
    return props.isLoggedin ? <button onClick ={props.onClick}>Login</button> : <button onClick ={props.onClick}>Logout</button>
}
function Greting(props) {
    return props.isLoggedin ? <h1>welcome back!</h1> : <h1>Please sign up.</h1>
}
class LoginControl extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isLoggedIn: false
    }
  }
  handleLoginON = () => {
      console.log(1234);
    this.setState({
      isLoggedIn: !this.state.isLoggedIn
    })
  }
  render () {
    const {isLoggedIn} = this.state
    let button = <LogoutButton isLoggedin = {isLoggedIn} onClick = {this.handleLoginON}></LogoutButton>
    return <div>
        <Greting isLoggedin = {isLoggedIn} />
        {button}</div>
  }
}
export { LoginControl }
